<!DOCTYPE html>
<html>
<head>
<title>Electromagnetic Field Diagram</title>
</head>
<body>

<canvas id="myCanvas" width="500" height="500" style="background-color: #FFFFFF;"></canvas>

<script>
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');

    // Style settings from the image
    const color = '#3a3a3a';
    ctx.strokeStyle = color;
    ctx.fillStyle = color;
    ctx.lineWidth = 2;

    // Helper function to draw an arrow
    function drawArrow(ctx, fromx, fromy, tox, toy, headlen = 10) {
        const dx = tox - fromx;
        const dy = toy - fromy;
        const angle = Math.atan2(dy, dx);
        ctx.beginPath();
        ctx.moveTo(fromx, fromy);
        ctx.lineTo(tox, toy);
        ctx.stroke();
        ctx.beginPath();
        ctx.moveTo(tox, toy);
        ctx.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
        ctx.moveTo(tox, toy);
        ctx.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
        ctx.stroke();
    }

    // 1. Draw the long straight wire
    ctx.beginPath();
    ctx.moveTo(100, 50);
    ctx.lineTo(100, 400);
    ctx.stroke();

    // 2. Draw the current I arrow and label
    drawArrow(ctx, 100, 180, 100, 140, 10);
    ctx.font = 'italic 22px Times New Roman';
    ctx.fillText('I', 80, 165);

    // 3. Draw the metal rod AB
    // The original image rod is a simple line, so we will use fillRect for a thin rectangle
    ctx.fillRect(160, 230, 240, 10);

    // 4. Draw the labels A and B
    ctx.font = '22px Times New Roman';
    ctx.fillText('A', 160, 265);
    ctx.fillText('B', 390, 265);

    // 5. Draw the velocity vector v and label
    const rodCenterX = 160 + 240 / 2;
    drawArrow(ctx, rodCenterX, 230, rodCenterX, 100, 12);
    ctx.font = 'italic 22px Times New Roman';
    ctx.fillText('v', rodCenterX + 12, 120);

    // 6. Draw the bottom text "题 10 图"
    ctx.font = '24px "SimSun", "KaiTi"'; // Common font for Chinese characters
    ctx.textAlign = 'center';
    ctx.fillText('题 10 图', canvas.width / 2, 450);

</script>

</body>
</html>